<template>
	<!--  -->
	<div class="mainContent sportnew">
		<div class="bread-nav">
			<span class="bread-item">仓储管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">抽盘列表</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="back">抽盘列表</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">抽盘详情</span>
			
		</div>
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="盘点单详情" name="1"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="detailsTabsBtn" v-if="Model.mainType == 'detail' ">
					<p class="itemBtn" @click="dipStart">开始盘点</p>
				</div>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">盘点单信息</p>
					</div>
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1  订单详情                 ************************************** -->
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="exports" v-if="Model.mainType == 'dip' && Model.orderStatus != 4">
							<el-row>
								<el-form :inline="true" class="demo-form-inline">
									<div v-on:keyup.enter="onSearchCode">
										<el-form-item label="">
											<el-input v-model="Model.searchCode" placeholder="请输入条码/包码"></el-input>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="onSearchCode">确定</el-button>
										</el-form-item>
									</div>
								</el-form>
							</el-row>
						</div>
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">盘点明细</p>
							<div class="tableItemTitleNumber">
								(
								<div class="num" style="color: #9db919;">{{Model.fiNum}}</div>
								<div class="gl">/</div>
								<div class="numall">{{Model.allNum}}</div>
								)
							</div>
						</div>
						<div class="detailTableDetail">
							<el-table stripe :data="Model.tableData" border @selection-change="handleSelectionChange">
								<el-table-column fixed prop="countingResults" label="盘点结果" width="140" v-if="Model.mainType == 'detail' ">
								    <template slot-scope="scope">
								        <p>{{scope.row.countingResults | ResultsWord}}</p>
								    </template>
								</el-table-column>
								<el-table-column fixed prop="countingStatus" label="盘点状态" width="100">
								    <template slot-scope="scope">
								        <p>{{scope.row.countingStatus | StatusWord}}</p>
								    </template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tableHeaderData"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column label="盘点纪录" fixed="right" align="center" width="150">
									<template slot-scope="scope">
										<p v-if="Model.mainType == 'detail' ">{{scope.row.countingRecord}}</p>
										<el-input v-else type="textarea" v-model="scope.row.countingRecord"></el-input>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<el-row class="pagination-cont">
						    <el-pagination
						      @size-change="handleSizeChange"
						      background
						      @current-change="handleCurrentChange"
						      :current-page="Model.paginationObject.currentPage"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="Model.paginationObject.pageSize"
							  :pager-count="5"
						      layout="sizes, prev, pager, next, jumper, slot"
						      :total="Model.paginationObject.total">
						      <div class="pagination-slot">
						        显示
						        <p class="slot-i">{{Model.paginationObject.num1}}</p>
						        到
						        <p class="slot-i">{{Model.paginationObject.num2}}</p>
						        ，共
						        <p class="slot-i">{{Model.paginationObject.total}}</p>
						        记录
						      </div>
						    </el-pagination>
						</el-row>
						<!-- 按钮 -->
						<el-row class="bottom" v-if="Model.mainType == 'dip' ">
							<div class="btn_group">
								<div class="btn_item" v-if="Model.orderStatus == 1 || Model.orderStatus == 2" @click="onSave()">保存</div>
								<div class="btn_item" v-if="Model.orderStatus == 1 || Model.orderStatus == 2" @click="onEnd()">结束盘点</div>
								<div class="btn_item" v-if="Model.orderStatus == 3" @click="onSubmit()">提交盘点报告</div>
							</div>
						</el-row>
						
					</el-row>
				</div>
				<!-- ******************************** -->
			</div>
			
		</div>
		
		<!-- 导入文件 弹窗 -->
		
		
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "newPage",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
<style>
	
</style>
